<template>
  <div id="page" :style="{ background: detail.backgroundColor }">
    <div class="box" :style="{ background: detail.backgroundColor }">
      <span >淘票票 - {{ detail.nm }}</span>
      <span class="btn" @click="goback">返回</span>
    </div>
    <main>
      <div class="top">
        <img v-lazy="detail.img.replace('/w.h/', '/')" />
        <div class="top-right">
          <h3>{{ detail.nm }}</h3>
          <p>{{ detail.enm }}</p>
          <p>{{ detail.cat }}</p>
          <p>{{ detail.src }} | {{ detail.dur }}分钟</p>
          <p>{{ detail.pubDesc }}</p>
          <p v-if="detail.sc === 0">
            <span>暂无评分</span>
          </p>
          <p v-else>
            <van-rate
              :value="detail.sc / 2"
              :size="18"
              allow-half
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
            />
            <span>{{ detail.sc }}</span>
          </p>
        </div>
      </div>
      <div class="clamp">
        <div class="clamp-header">
          简介
          <div class="right" @click="controlShowMany">
            <span v-if="hideSomething"
              >展开<i class="iconfont icon-jiantoudown"></i
            ></span>
            <span v-else>收起<i class="iconfont icon-jiantoushang1"></i></span>
          </div>
        </div>
        <div :class="{ 'line-clamp': hideSomething }">{{ detail.dra }}</div>
      </div>
      <div class="actors">
        <div class="title">
          <span>演职人员</span>
        </div>
        <div class="actor-list">
          <ul>
            <li v-for="item in crews" :key="item.id">
              <div class="a" v-for="it in item" :key="it.id">
                <img v-lazy="it.avatar.replace('/w.h/', '/')" />
                <p class="name">{{ it.cnm }}</p>
                <p class="role">{{ it.desc }}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="actors">
        <div class="title">
          <span>视频和剧照</span>
        </div>
        <div class="phone">
          <div v-for="list in detail.photos" :key="list.id">
            <img v-lazy="list.replace('/w.h/', '/')" alt="" />
          </div>
        </div>
      </div>
    </main>
    <div class="hotword">
      <div class="title">
        <h3>热门评价</h3>
      </div>
      <ul v-if="hide">
        <li v-for="it in comment.slice(0, 3)" :key="it.id">
          <img v-lazy="it.avatarurl.replace('/w.h/', '/')" />
          <div class="show">
            <div class="item">
              <div class="hot-name">
                {{ it.nickName }}
              </div>
              <span class="hot-time">{{ it.startTime }}</span>
            </div>
            <div class="l">
              {{ it.content }}
            </div>
          </div>
        </li>
      </ul>
      <ul v-else>
        <li v-for="it in comment" :key="it.id">
          <img v-lazy="it.avatarurl.replace('/w.h/', '/')" />
          <div class="show">
            <div class="item">

                <div class="hot-name">
                  {{ it.nickName }}
                </div>
                <span class="hot-time">{{ it.startTime }}</span>
            </div>
            <div class="l">
              {{ it.content }}
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="look" @click="ShowMany">
      <span v-if="hide">查看更多热评</span>
      <span v-else>收起</span>
    </div>
    <!-- <div style="height: 0.4rem; background-color: white"></div> -->
  </div>
</template>

<script>
import { mapState } from "vuex";
import "../assets/css/detail.css";
export default {
  data() {
    return {
      hideSomething: true,
      hide: true,
    };
  },
  computed: {
    ...mapState("data", ["detail", "crews", "comment"]),
  },

  methods: {
    controlShowMany() {
      this.hideSomething = !this.hideSomething;
    },
    ShowMany() {
      this.hide = !this.hide;
    },
    goback() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.hotword {
  background-color: white;
  padding: 0 0.15rem;
  border-radius: 20px 20px 0 0;
}
.hotword .title {
  height: 0.4rem;
  font-size: 0.15rem;
  line-height: 0.5rem;
}
.hotword ul li {
  /* height: 2rem; */
  margin-top: 0.15rem;
  display: flex;
}
.hotword li img {
  float: left;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 100%;
  margin-right: 0.1rem;
}
.hotword li .show {
  height: 100%;
  float: left;
  font-size: 0.14rem;
}
.hotword li .item {
  height: 0.3rem;
  line-height: 0.3rem;
}
.hotword li .item .hot-time {
  float: right;
}
.hotword li .item .hot-name {
  float: left;
  width: 1rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.l {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  line-height: 0.25rem;
}
.look {
  height: 0.3rem;
  line-height: 0.3rem;
  background-color: white;
  font-size: 0.14rem;
  color: cornflowerblue;
  text-align: center;
}
</style>



